/**
* author：王海虎
* version：1.0
**/
import React, { Component } from 'react';
import { Tabs } from '@ant-design/react-native';
import { Image, Text, View, Platform } from 'react-native';
import styles from './assets/style';
import { isIphoneX } from '../../components/screenUtil';
//组件
import RenderContent from './components/xuge-item';
const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? (isIphoneX() ? 44 : 20) : StatusBar.currentHeight;
class Xuge extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabsList: [
                { title: '推荐' },
                { title: '京剧' },
                { title: '上海剧团' },
                { title: '梅兰芳' },
                { title: '京剧培训' },
                { title: 'xxx1' },
                { title: 'xxx2' },
                { title: 'xxx3' },
            ],
            currentItem: {}
        }
    }

    componentDidMount() {
        this.setState({
            currentItem: this.state.tabsList[0]
        })
    }

    render() {
        let { currentItem = {}, tabsList = [] } = this.state;
        return (
            <View style={[styles.box, { marginTop: STATUSBAR_HEIGHT }]}>
                {/* 搜索 */}
                <View style={[styles.transverse, styles.boxPaddingRow]}>
                    <View style={styles.search}><Image style={{ width: 10, height: 10 }} source={require('../../assets/images/search.png')} /><Text onPress={() => this.props.navigation.navigate('Search')} style={styles.searchText}>搜索您想看的</Text></View>
                    <Image style={styles.historicalRecord} source={require('./assets/images/historical-record.png')} />
                </View>

                {/* Tab */}
                <View style={{ flex: 1 }}>
                    <View style={{ flex: 2 }}>
                        <Tabs
                            tabs={tabsList}
                            destroyInactiveTab
                            tabBarActiveTextColor={'#000'}
                            tabBarInactiveTextColor={'#9d9d9d'}
                            tabBarUnderlineStyle={{ backgroundColor: 'rgba(0,0,0,0)' }}
                            onChange={(e) => { this.setState({ currentItem: e }) }}
                        >
                            <RenderContent data={currentItem} />
                        </Tabs>
                    </View>
                </View>
            </View>
        )
    }
}

export default Xuge;